<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :is-back="false" title=" " :background="{ background: '#ffffff'  }" :border-bottom="false"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="header" @click="changeMyInfo">
			<view class="header_left">
				<image mode="aspectFill" :src="_user_info.miniAvatar" />
				<view class="header_left_content">
					<view class="header_left_content_name">{{_user_info.nickname}}</view>
					<view class="header_left_content_number">账号: {{_user_info.account}}</view>
				</view>
			</view>
			<view class="header_right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view  style="height: 15rpx;"></view>
		<u-cell-group>
			<u-cell-item title="服务" :title-style="{ marginLeft: '20rpx',}" :center="true" ><u-icon slot="icon" class="iconfont icon-chatzhifupingtai-weixin"></u-icon></u-cell-item>
		</u-cell-group>
		<view  style="height: 15rpx;"></view>
		<u-cell-group>
			<u-cell-item v-for="(item, index) in groupList" :key="index" :title="item.title" :title-style="{ marginLeft: '20rpx' }" @tap="linkTo(item)">
				<u-icon slot="icon" :class="item.class"></u-icon>
			</u-cell-item>
		</u-cell-group>
		<view  style="height: 15rpx;"></view>
		<u-cell-group>
			<u-cell-item title="设置"  @click="setUp" :title-style="{ marginLeft: '20rpx' }"><u-icon slot="icon" class="iconfont icon-chatshezhi"></u-icon></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
import { api } from '../../api/api';
import { myRequest } from '../../util/api';

export default {
	data() {
		return {
			groupList: [
				{ title: '收藏', class:'iconfont icon-chatshoucang' },
				{ title: '朋友圈', class:'iconfont icon-chattupian',bind:"pages/firendCircle/firendCircle" },
				{ title: '视频号', class:'iconfont icon-chatbofang' },
				{ title: '卡包', class:'iconfont icon-chatqiabao-copy' },
				{ title: '表情', class:'iconfont icon-chatxiaolian' }
			]
		};
	},
	methods: {
		changeMyInfo(){
			uni.navigateTo({
				url: '/pages/myInfo/myInfo'
			});
		},
		linkTo(item){
			item.bind && this.$u.route(item.bind)
		},
		setUp() {
			// 弹出选择对话框
			plus.nativeUI.actionSheet({
			    cancel: '取消',
			    buttons: [
			        { title: '检查更新' },
			        { title: '切换账号' },
			        { title: '退出登录' }
			    ]
			}, async function(e) {
			    if (e.index === 1) {
			        // 检查更新
					uni.showToast({
						title: ""
					})
			    } else if (e.index === 2) {
					// 切换账号
				} else if (e.index === 3) {
			        // 退出登录
					uni.showLoading({
						title: '正在注销...',
						mask: true
					});
					const response = await myRequest({
						url: api.logout,
						method: 'GET',
						data: {},
						success: (res) => {
							if (res.data.code == 200 && res.data.httpCode == 200){
								uni.hideLoading();
								uni.reLaunch({
									url: '/pages/login/login'
								});
							}
						}
					});
			    }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 38rpx;
		background-color: #ffffff;
		&_left{
			display: flex;
			align-items: center;
			&_content{
				padding-left: 20rpx;
				&_name{
					font-weight: bold;
					font-size: 18px;
				}
				&_number{
					color:#969799 ;
					margin-top: 10px;
					font-size: 12px;
				}
			}
		}
		&_right{
			font-size: 28rpx;
			color: #969799;
		}
		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 6px;
		}
	}
.status_bar {
	// height: var(--status-bar-height);
	height: 100rpx;
	width: 100%;
	background-color: #ffffff;
}
</style>
